<template>
  <view class="person-center-wrapper page-wrapper">
    <view class="header-top">
      <view class="header-bg">
        <u-image
          :src="$getImageUrl('images/personalCenterBg@2x.png')"
          mode="scaleToFill"
          width="100%"
          height="610rpx"
        >
        </u-image>
      </view>
      <view class="info">
        <u-image
          width="104rpx"
          height="104rpx"
          :src="$getImageUrl('images/xinwen1@2x.png')"
          shape="circle"
        ></u-image>
        <text class="title">{{ user.userName }}</text>
        <text class="sept">|</text>
        <text class="sub-title">{{ user.sep }}</text>
      </view>
    </view>
    <view class="content">
      <view class="card-wrapper" v-for="item in cardConfig" :key="item.field">
        <view class="left">
          <u-image :src="item.icon" width="52rpx" height="52rpx"></u-image>
          <text class="card-item-title">{{ item.title }}</text>
        </view>
        <view class="right">
          <text class="card-item-sub-title">
            {{
              item.field === "history"
                ? item.data
                : item.field === "integral"
                ? item.data + "分"
                : "第" + item.data + "名"
            }}
          </text>
          <u-icon name="arrow-right" color="#999999"></u-icon>
        </view>
      </view>
    </view>
		<CTabbar currentPath="/pages/personalCenter/index"></CTabbar>
  </view>
</template>

<script>
	import CTabbar from "@/components/CTabbar";
export default {
  name: "PersonalCenter",
  components: {
			CTabbar,
		},
  data() {
    return {
      user: {
        userName: "王大猛",
        sep: "软件开发部",
      },
      cardConfig: [
        {
          title: "我的积分",
          field: "integral",
          toPath: "",
          icon: this.$getImageUrl("images/bonus01.png"),
          data: "2000",
        },
        {
          title: "成绩排名", 
          field: "rank",
          toPath: "",
          icon: this.$getImageUrl("images/bonus02.png"),
          data: "10",
        },
        {
          title: "考试记录",
          field: "history",
          toPath: "",
          icon: this.$getImageUrl("images/bonus03.png"),
          data: "2023-04-10",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.person-center-wrapper {
  .header-top {
    position: relative;
  }
  .header-bg {
    width: 100%;
    height: 610rpx;
    position: fixed;
    z-index: 5;
  }
  .content {
    position: relative;
    z-index: 10;
    padding: 0 40rpx;
    .card-wrapper {
      background: #fff;
      border-radius: 40rpx;
      width: 100%;
      height: 164rpx;
      display: flex;
      align-items: center;
      padding: 0 60rpx;
      justify-content: space-between;
      margin-bottom: 40rpx;
      .left {
        display: flex;
        align-items: center;
        .card-item-title {
          margin-left: 16rpx;
        }
      }
      .right{
        color: #999;
        .card-item-sub-title{
          margin-right: 12rpx;
        }
      }
    }
  }
  .info {
    padding: 200rpx 40rpx 140rpx;
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
    z-index: 10;
    .title {
      margin-left: 24rpx;
      font-size: 40rpx;
      font-weight: 500;
    }
    .sub-title,
    .sept {
      font-size: 32rpx;
    }
    .sept {
      margin: 0 24rpx;
    }
  }
}
</style>